import React, {PropTypes} from 'react'
import {Dropdown, Button, Icon, Menu} from 'antd'

const DropOption = ({onMenuClick, menuOptions = [], buttonStyle, dropdownProps}) => {
  const menu = menuOptions.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>)
  return <Dropdown overlay={<Menu onClick={onMenuClick} {...dropdownProps}>
    {menu}
  </Menu>}>
    <Button style={{ border: 'none', ...buttonStyle}}>
      <Icon style={{ marginRight: 2 }} type='bars' />
      <Icon type='down' />
    </Button>
  </Dropdown>
}

DropOption.propTypes = {
  onMenuClick: PropTypes.func,
  menuOptions: PropTypes.array.isRequired,
  buttonStyle: PropTypes.object,
  dropdownProps: PropTypes.object
}

export default DropOption
